<template>
	<uni-nav-bar title="盘库" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<!-- 切换 -->
	<view class="package" style="padding:0px;">
		<z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
	</view>
	<view class="package datas" style="padding: 10rpx;">
		<uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
			@change="change" />
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="package scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<!-- @click="item.change!=0?navTo('administrator/inventory/inventoryDeatil?id='+item.fill_id+'&start='+item.start+'&end='+item.end):''" -->
		<view class="all" v-for="item in orderLists" :key="item.id">
			<view class="space-between">
				<view style="width:75%;">
					{{item.fill_name?item.fill_name:item.service_name}}（{{item.fill_id?item.fill_id:item.service_id}}）
				</view>
				<view class="center"><text class="but" :style="{background:item.level_color}"></text>{{item.staff_name}}
				</view>
			</view>
			<view class="space-between top">
				<view>上次盘量 </view>
				<view>{{item.prev_amount}}</view>
			</view>
			<view class="space-between top">
				<view>上次系统量</view>
				<view>{{item.prev_current?item.prev_current:"--"}}</view>
			</view>
			<view class="space-between top">
				<view>上次盘差</view>
				<view>{{item.prev_cha?item.prev_cha:'--'}}</view>
			</view>
			<view class="space-between top">
				<view>本次盘量</view>
				<view>{{item.amount}}</view>
			</view>
			<view class="space-between top">
				<view>本次系统量</view>
				<view>{{item.current}}</view>
			</view>
			<view class="space-between top">
				<view>本次盘差</view>
				<view>{{item.cha}}</view>
			</view>
			<view class="space-between top">
				<view>{{item.createtime}}</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无盘库记录"></Popu>
	</scroll-view>
	<uni-popup ref="popup" type="center">
		<image style="width: 600rpx;border-radius: 5px;" mode="widthFix" :src="image" @click="close()"></image>
	</uni-popup>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { ref } from 'vue';
	import { toPublish } from '@mqtt';
	import { showLoading } from '@/utils/prompt';
	import { onShow } from '@dcloudio/uni-app';
	import { format, subDays } from 'date-fns';
	import { getAmountPanList } from '@/gql/warehouse';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const list = [{ name: '加注机' }, { name: '服务点' }]
	const current = ref(0)
	const tabs = ref(null)
	const type = ref('fill')

	// data
	const now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	const daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);

	const orderLists = ref([]);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const pageHeight = ref();
	const image = ref()
	const popup = ref(null)
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 170;
		},
	});
	init()
	function init() {
		showLoading()
		const payload = {
			query: getAmountPanList,
			variables: {
				page: currentPage.value,
				start,
				end,
				type: type.value
			},
		};
		toPublish(
			'ql/control/getAmountPanList',
			payload,
			(obj : any) => {
				const { getAmountPanList } = obj.data;
				orderLists.value = [...orderLists.value, ...getAmountPanList.list];
				lastPage.value = getAmountPanList.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	function change([sta, en]) {
		currentPage.value = 1;
		orderLists.value = [];
		start = sta;
		end = en;
		init();
	}
	//tabs通知swiper切换
	function tabsChange(index : number) {
		current.value = index;
		type.value = index === 0 ? 'fill' : 'service'
		currentPage.value = 1;
		orderLists.value = [];
		init();
	}
	function open(im : string) {
		image.value = im
		popup.value.open();
	}
	function close() {
		popup.value.close();
	}
</script>

<style scoped lang="less">
	.all {
		border-bottom: 1px solid #eee;
		padding: 20rpx 0px;
		box-sizing: border-box;
	}

	.all:nth-last-child(1) {
		border-bottom: 0px;
	}

	.all:nth-of-type(1) {
		padding-top: 0px;
	}

	.top {
		margin-top: 15rpx;
	}

	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 20rpx auto;
		font-size: 32rpx;
	}

	.but {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		margin-right: 10rpx;
	}
</style>
<style>
	.datas>>>.uni-date__x-input {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-date-x {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-icons {
		font-size: 48rpx !important;
	}
</style>